<template>
  <div class="contain">
    <!-- 图片区域
    <div class="slideShow">
      <ul>
        <li :key=index v-for="(img,index) in imgArray" v-show="index===mark" >
          <img :src="img">
        </li>
      </ul>
    </div>
    指示器区域
    <div class="bar">
      <span :key="index" v-for="(img,index) in imgArray" :class='mark==index ? "active":""' @mouseenter="change(index)" ></span>
    </div> -->
    <el-carousel :interval="5000" arrow="always" height="500px">
      <el-carousel-item v-for="(item, index) in imgArray" :key="index">
        <img :src="item" alt="" />
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
export default {
  name: 'HomePage',
  // created() {
  //   this.$http({
  //     url: '/zxb/home/swiper',
  //     method: 'post'
  //   }).then(res => {
  //     this.swipers = res.data.data
  //     console.log(this.swipers);
  //   })
  // },
  // data() {
  //   return {
  //     swipers: []
  //   }
  // },
    data() {
      return {
        mark:0, //指示器位置标识
        imgArray:[
          require('../../../assets/1.jpg'),
          require('../../../assets/2.jpg'),
          require('../../../assets/3.jpg'),
          require('../../../assets/4.jpg'),
          require('../../../assets/5.jpg')

        ]
      }
    },
  //   methods:{
  //     autoPlay() {
  //       this.mark++;
  //       if(this.mark===5){
  //         this.mark=0
  //       }
  //     },
  //     play(){
  //       setInterval(this.autoPlay,3000)
  //     },
  //     change(index){
  //       this.mark=index
  //     }
  //   },
  //   created() {
  //     this.play()
  //   }
}
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
}
.contain {
  position: relative;
  top: 40px;
  // width: 750px;
  height: 500px;
  // border: 1px solid red;
  // .slideShow {
  //   width: 100%;
  //   height: 100%;
  //   img {
  //     width: 100%;
  //     height: 500px;
  //   }
  // }
  // .bar {
  //   position: absolute;
  //   width: 100%;
  //   bottom: 10px;
  //   left: 15px;
  //   span {
  //     width: 10px;
  //     height: 10px;
  //     border-radius: 50%;
  //     border: 1px solid;
  //     background-color: white;
  //     border-color: gray;
  //     display: inline-block;
  //     margin-right: 15px;
  //     cursor: pointer;
  //   }
  // }
}
.el-carousel__item{
  img{
    width: 100%;
    height:100%;
  }
}
.active {
  background-color: red !important;
}
</style>
